<template>
    <div style="background: #111214;color:#fff; width: 100%;min-height: 100vh;">
      <native :title="title"></native>
      <div class="recharge-home">
        <div class="recharge-select">
          {{code}}
        </div>
        <div class="recharge-qrcode">
          <div id="qrcode"></div>
        </div>
        <div>
          <span style="font-size: 12px;font-family: axis;">{{invitationCode}}</span>
          <img @click="copyActiveCode" v-clipboard:copy="invitationCode" src="../assets/img/icon-copy.svg" alt="">
        </div>
        <div class="recharge-box">
          <div>
            <img src="../assets/img/transfer-icon-warning.svg" alt="">
            <span style="color: rgba(255, 255, 255, .5);">风险提示</span>
          </div>
          <div style="margin-top: 11px;">
            <p style="line-height: 1.6;">因个人操作不慎转账到非平台钱包地址，所造成的损失由个人承担！</p>
            <p style="margin-top: 3px;" v-if="code == 'USDT'">仅支持ERC20 USDT充值！</p>            
          </div>
        </div>
      </div>
    </div>

  </template>

  <script>
  import native from './public/native.vue'
  import { Toast } from 'vant'
  import QRCode from 'qrcodejs2'
  export default {
    name: 'recharge',
    data () {
      return {
        title:'充值',
        invitationCode:'',
        code:''
      }
    },  
    components:{
      native
    },
    computed: {
      
    },
    mounted() {
      this.code = this.$route.params.code;
      this.initData();
    },
    methods: {
      initData(){
        this.$http.get(this.utils.config+'/gz/member/currency_address?currency='+this.code).then((data)=>{
          if(data.data.success){
            this.invitationCode = data.data.data;
            this.qrcode();
          }
        })
      },
      qrcode() {
        let qrcode = new QRCode('qrcode', {
          width: 164,  
          height: 164,
          text: this.invitationCode, // 二维码地址
          colorDark : "#000",
          colorLight : "#fff",
        })
      },
      copyActiveCode(){
        Toast("复制成功");
      },
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .recharge-home{
      padding:15px;
      text-align: center;
    }
    .recharge-select{
      margin-top: 60px;
      font-family: axis;
    }
    .recharge-qrcode{
      padding: 8px;
      background-color: #fff;
      width: 180px;
      height: 180px;
      margin-left: calc(50% - 90px);
      margin-top: 25px;
      margin-bottom: 20px;
    }
    .recharge-box{
      width: 100%;
      height: 135px;
      background-color: #1E1F24;
      padding: 15px;
      border-radius: 8px;
      text-align: left;
      margin-top: 60px;
    }
  </style>
